<template>
  <div>
    <el-form
      :model="addForm"
      ref="addFormRef"
      label-position="top"
      :rules="rules"
    >
      <el-form-item label="回访方式" prop="visitMethod">
        <el-select v-model="addForm.visitMethod" placeholder="请选择回访方式">
          <el-option
            v-for="item in visitMethodMap"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="回访结果" prop="visitResult">
        <el-input
          v-model="addForm.visitResult"
          type="textarea"
          :rows="4"
          placeholder="请输入回访结果"
        />
      </el-form-item>

      <div class="fixed bottom-2 right-2">
        <el-button @click="handleCancel(0)">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmit">
          {{ loading ? "提交中..." : "提交" }}
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

onMounted(() => {});

const emit = defineEmits(["handleBack"]);
const props = defineProps({
  detailForm: {
    type: Object,
    default: {},
  },
});

const addFormRef = ref(null);
const addForm = ref({
  id: null,
  visitMethod: "",
  visitResult: "",
});

const loading = ref(false);
const handleSubmit = () => {
  addFormRef.value.validate((valid) => {
    if (!valid) return;
    addForm.value.id = props.detailForm.id;
  });
};

const handleCancel = (val = 0) => {
  addFormRef.value.resetFields();
  emit("handleBack", val);
};

const visitMethodMap = ref([
  { id: 1, name: "到店" },
  { id: 2, name: "电话" },
  { id: 3, name: "短信" },
  { id: 4, name: "微信" },
]);

const rules = ref({
  visitMethod: [{ required: true, message: "请选择回访方式" }],
  visitResult: [{ required: true, message: "请输入回访结果" }],
});
</script>

<style scoped lang="scss">
</style>